<template>
	<view class="Follow-auto friend_Page">
		<headerinfo></headerinfo>
		<u-navbar title="选择城市地址" :placeholder="true" :autoBack="true"></u-navbar>

		<u-index-list :index-list="indexList">
			<template v-for="(item, index) in itemArr">
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<u-index-item>
					<view @click="checlitrem(cell)" :key="index2" class="list-cell" v-for="(cell, index2) in item">
						{{cell}}
					</view>
				</u-index-item>
			</template>
		</u-index-list>
	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [],
				indexList: [],
				itemArr: []
			};
		},
		onShow() {
			this.getcityAddress()
		},
		onReachBottom() {

		},
		methods: {
			getcityAddress() {
				this.$api2.getCities().then(res => {
					
					let arr = []
					let arr2 = []
					res.forEach(item=>{
						arr.push(item.initial)
						arr2.push(item.cityNameList)
					})
					this.indexList = arr
					this.itemArr = arr2
				})
			},
			checlitrem(item){
				console.log(item)
				uni.$emit('checkaddressStyle', item)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	};
</script>


<style lang="scss" scoped>
	.list-cell{
		font-size: 32rpx;
		padding: 0 20rpx;
		height: 75rpx;
		display: flex;
		align-items: center;
	}
	
	::v-deep .u-index-list__letter{
		top: 50%!important;
		transform: translateY(-50%);
	}
</style>